<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.container{
			width: 600px;
			border:1px red solid;
			margin:20px auto;
		}
		.container nav{
			height: 50px;
			display: flex;
		}
		a{
			display: block;
			flex:1;
			text-align: center;
			line-height: 50px;
			text-decoration: none;
			color:#333;
		}
		.content div{
			height: 350px;
			color:#ccc;
			font-size: 30px;
			text-align: center;
			line-height: 350px;
			display: none;
		}
		.content .show{
			display: block;
		}
		.active{
			background:red;
			color:#fff;
		}
	</style>
</head>
<body>
<h1 align="center">tab选项卡</h1>
	<div class="container">
		<nav>
			<a href="#" class="active">第一个</a>
			<a href="#">第二个</a>
			<a href="#">第三个</a>
			<a href="#">第四个</a>
		</nav>
		<div class="content">
			<div class="show">第1个内容</div>
			<div class="">第2个内容</div>
			<div class="">第3个内容</div>
			<div class="">第4个内容</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	//获取a标签
	var btns=document.getElementsByTagName('a');
	var content=document.getElementsByClassName('content')[0];
	var box=content.getElementsByTagName('div');
	//绑定单击事件
	for(var i=0;i<btns.length;i++){
		//给每一个a标签绑定title属性
		btns[i].title=i;
		//给每一个a标签绑定单击事件
		btns[i].onclick=function(){
			for(var j=0;j<btns.length;j++){
				btns[j].className='';//清空格式
				box[j].className='';
			}
			this.className='active';
			box[this.title].className='show';
		}
	}
</script>
</html>